<template>
  <div>
    <div class="title">{{text}}保险缴费总览</div>
    <div>
      <el-row>
        <el-col :span="3">参保日期</el-col>
        <el-col :span="3">{{overviewObject.begin_date||'无数据'}}</el-col>
        <el-col :span="3">数据期别</el-col>
        <el-col :span="3">{{overviewObject.end_date||'无数据'}}</el-col>
        <el-col :span="3">总缴费月数</el-col>
        <el-col :span="3">{{overviewObject.total_income_month||'无数据'}}</el-col>
        <el-col :span="3">总欠缴月数</el-col>
        <el-col :span="3">{{overviewObject.arrear_month||'无数据'}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="3">缴费基数</el-col>
        <el-col :span="3">{{overviewObject.base_number||'无数据'}}</el-col>
        <el-col :span="3">个人总缴费金额</el-col>
        <el-col :span="3">{{overviewObject.total_personal_income||'无数据'}}</el-col>
        <el-col :span="3">单位总缴费金额</el-col>
        <el-col :span="3">{{overviewObject.total_company_income||'无数据'}}</el-col>
        <el-col :span="3">账户余额</el-col>
        <el-col :span="3">{{overviewObject.balance||'无数据'}}</el-col>
      </el-row>
    </div>
    <div class="title">{{text}}保险缴费记录</div>
    <el-table :data="insuranceArray" max-height="700">
      <el-table-column prop="month" label="月份" align="center"></el-table-column>
      <el-table-column prop="month_count" label="月数" align="center"></el-table-column>
      <el-table-column prop="company_name" label="公司名称" align="center"></el-table-column>
      <el-table-column prop="base_number" label="缴费基数" align="center"></el-table-column>
      <el-table-column prop="monthly_company_income" label="单位缴存" align="center"></el-table-column>
      <el-table-column prop="monthly_personal_income" label="个人缴存" align="center"></el-table-column>
      <el-table-column prop="type" label="缴费状态" align="center"></el-table-column>
      <el-table-column prop="company_percentage" label="单位缴存比例" align="center"></el-table-column>
      <el-table-column prop="personal_percentage" label="个人缴存比例" align="center"></el-table-column>
      <el-table-column prop="last_pay_date" label="缴存日期" align="center"></el-table-column>
    </el-table>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      overviewObject: {
        type: Object
      },
      insuranceArray: {
        type: Array
      },
      text: {
        type: String
      }
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .title {
    font-weight: bold;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    background-color: #2e78f2;
    color: #fff;
  }

  .el-row {
    display: flex;

    .el-col {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 0;
      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;

      &:nth-child(2n+1) {
        color: #000;
        font-weight: 700;
      }

      &:last-child {
        border-right: none;
      }
    }
  }
</style>
